<template>
  <div class="identify">
    <div class="identify-header">
      <div class="title">病害识别</div>
      <div class="classification">
        <el-tag>农作物病害识别</el-tag>
        <el-tag>图片识别</el-tag>
      </div>
      <div class="info">
        可识别农作物类型：
        <a v-for="item in cropClass" :key="item.cropId" href="javascript:">{{item.cropName}}</a>
      </div>
    </div>
    <UploadPic/>
  </div>
</template>

<script>

import {mapActions, mapState} from "vuex";
import UploadPic from "@/components/user/UploadPic"

export default {
  name: "Identify",
  components:{
    UploadPic
  },
  methods:{
    ...mapActions('crop',{findClass:'findClass'})
  },
  computed:{
    ...mapState('crop',['cropClass']),
  },
  async created() {
    await this.findClass()
  }
}
</script>

<style scoped>
  .identify{
    width: 100%;
    animation: run 1s ease;
  }

  .identify-header{
    width: 100%;
    padding: 50px 20px 20px 80px;
    background-color: white;
  }

  .title{
    margin-bottom: 20px;
    font-size: 40px;
  }

  .classification {
    margin-bottom: 20px;
    font-size: 15px;
  }

  .classification a{
    background-color: #e9e9e9;
    border-radius: 5px;
    border: 1px solid #333333;
    margin-right: 10px;
    padding: 2px 4px;
    color: #333333;
  }

  .info{
    font-size: 20px;
  }

  .info a{
    margin-right: 10px;
  }

  .info a:hover{
    color: #0367a6;
  }
</style>